﻿@using DonutMgmtSystemFoundation.Helpers
@using ViewRes

@section Title{
    @Admin.Members
}

@section Pagename{
    <i class="users icon"></i>@Admin.Members
}

@section Styles{
    @Styles.Render("~/bundles/jqueryui")
    @Styles.Render("~/bundles/jqGridStyles")
}

@section Scripts{

    <script src='@Url.Content(string.Format("~/javascript/i18n/grid.locale-{0}.js", SessionContext.GetLanguage()))' type="text/javascript"></script>
    @Scripts.Render("~/bundles/jquery-ui")
    @Scripts.Render("~/bundles/jqGridScripts")
    <script type="text/javascript">
        $(function () {
            $("#gridTable").jqGrid({
                url: '@Url.Action("GetMembers", "Admin")',
                datatype: "json",
                mtype: 'POST',
                editurl: '@Url.Action("EditMember", "Admin")',
                colNames: ['@Admin.JqGId', '@Admin.JqGName', '@Admin.JqGEmail', '@Admin.JqGUserName', '@Admin.JqGRole', '@Admin.JqGActive'],
                colModel: [
                    { name: '@Admin.JqGId', index: '@Admin.JqGId', width: 55 },
                    { name: '@Admin.JqGName', index: '@Admin.JqGName', editable: true },
                    { name: '@Admin.JqGEmail', index: '@Admin.JqGEmail', editable: true },
                    { name: '@Admin.JqGUserName', index: '@Admin.JqGUserName', editable: true },
                    { name: '@Admin.JqGRole', index: '@Admin.JqGRole', editable: true, edittype: 'select', editoptions: { value: "1:Administrator; 2:Normal " }},
                    { name: '@Admin.JqGActive', index: '@Admin.JqGActive', editable: true, align: 'center', formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "true:false" } }
                ],
                rowNum: 10,
                rowList: [10, 25, 50],
                pager: '#pager',
                sortname: '@Admin.JqGId',
                viewrecords: true,
                sortorder: "asc",
                width: "800"
                //autowidth: true,
            });
            $("#gridTable").jqGrid('navGrid', '#pager', {
                edit: {
                    editCaption: "@Admin.JqEdit",
                    bSubmit: "@Shared.Save",
                    bCancel: "@Shared.Cancel"
                }, add: false, del: false
            });
        });
    </script>
}

<h3 class="ui header">@Admin.ManageMembers</h3>

<div class="ui grid">
    <div class="row">
        <div class="six column wide">
            <table id="gridTable"></table>
            <div id="pager"></div>
        </div>
    </div>
</div>


<!-- Message Dimmer -->
<div class="ui page dimmer" id="dimmerContent">
    <div class="content">
        <div class="center">
            <h2 class="ui inverted icon header">
                <i id="message-icon" class="icon circular inverted emphasized"></i>
                <span id="message"></span>
            </h2>
        </div>
    </div>
</div>

<!-- Loader -->
<div id="loader" class="ui page dimmer">
    <div class="ui large text loader">@Shared.Loading</div>
</div>
